<template>
  <div>
    <div>
      <div id="布艺沙发专区" style="height:250px" />
      <div id="真皮沙发专区" style="height:250px" />
      <div id="优+功能沙发" style="height:250px" />

      <!-- <div v-for="(item,index) in typeList" :id="item" :key="index" style="height:250px" /> -->
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'Charts',
  props: {
    chartStyle: {
      type: String,
      default: ''
    },
    dataList: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      firstInit: true,
      typeList: []// 大品类下的小分类，决定有几个图
    }
  },
  watch: {
    chartStyle: {
      handler(v) {
        this.$nextTick(() => {
          this.changeType(v)
        })
        // this.styleChangeFunc(v)
      },
      deep: true
    }
  },
  mounted() {
    this.initData(this.chartStyle)
    // if (this.chartStyle === 'bar') this.init(v)
    // else if (this.chartStyle === 'line') this.init(v)
  },
  methods: {
    changeType(v) {

    },
    initData(chartStyle) {
      console.log('显示类型', chartStyle)
      if (!chartStyle) return
      const keyList = Object.keys(this.dataList).filter(v => Number(v) >= 0)
      this.typeList = this.dataList.displayAreaNames
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        datas.push(this.dataList[keyList[i]])
      }
      const allList = []
      for (let j = 0; j < this.typeList.length; j++) {
        const list = []
        for (let k = 0; k < datas.length; k++) {
          if (datas[k][0] === this.typeList[j]) {
            list.push(datas[k].splice(1))
          }
        }
        allList.push({ type: this.typeList[j], list: list })
      }
      console.log('allList', allList)
      // console.log(type)
      allList.forEach(v => {
        this.initChart(v, chartStyle)
      })
      this.firstInit = false
      return
    },
    initChart(data, type) {
      const option = {
        legend: {
          show: true
        },
        title: {
          text: data.type
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {},
        dataset: {
          dimensions: [
            'product',
            ...this.dataList.month
            // '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
          ],
          source: this.formatData(data.list)
          // [
          //   ['L型', 489, 235, 679, 433, 900, 937, 34, 900, 1200, 690, 380, 1000],
          //   ['U型', 567, 234, 1598, 568, 235, 2000, 567, 790, 149, 992, 1100, 678],
          //   ['组合类', 345, 0, 937, 433, 1858, 937, 0, 20, 937, 433, 858, 937],
          //   ['一字型', 1133, 23, 569, 0, 890, 937, 0, 1858, 623, 433, 1390, 767]
          // ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type }, { type }, { type }, { type }, { type }, { type }, { type }, { type },
          { type }, { type }, { type }, { type }
        ]
      }
      console.log('哈哈啊哈', option)
      const chartDom = document.getElementById(data.type)
      const myChart = echarts.init(chartDom)
      option && myChart.setOption(option, true)

      // const chartDom2 = document.getElementById('main2')
      // const myChart2 = echarts.init(chartDom2)
      // option && myChart2.setOption({ ...option, legend: { show: false }, title: { text: '' }}, true)
    },
    formatData(list) {
      const data = list
      data.forEach((v, index) => {
        v.forEach((i, key) => {
          if (Number(i) >= 0) {
            data[index][key] = Number(i)
          }
        })
      })
      return data
    },
    initLine() {
      const option = {
        title: {
          text: '产品类型数据分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [
            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['L型', 'U型', '组合型', '一字型']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '1月',
            type: 'line',
            data: [1202, 1322, 1012, 1324]
          },
          {
            name: '2月',
            type: 'line',
            data: [234, 342, 112, 1224]
          },
          {
            name: '3月',
            type: 'line',
            data: [432, 1000, 912, 674]
          },
          {
            name: '4月',
            type: 'line',
            data: [1926, 1322, 512, 254]
          },
          {
            name: '5月',
            type: 'line',
            data: [1242, 722, 1779, 2234]
          },
          {
            name: '6月',
            type: 'line',
            data: [1402, 1922, 1712, 924]
          },
          {
            name: '7月',
            type: 'line',
            data: [1982, 1322, 1912, 2000]
          },
          {
            name: '8月',
            type: 'line',
            data: [1082, 1922, 1012, 124]
          },
          {
            name: '9月',
            type: 'line',
            data: [1052, 1722, 1012, 24]
          },
          {
            name: '10月',
            type: 'line',
            data: [1772, 122, 112, 1324]
          },
          {
            name: '11月',
            type: 'line',
            data: [1772, 1322, 1772, 554]
          },
          {
            name: '12月',
            type: 'line',
            data: [1420, 1552, 772, 1824]
          }
        ]
      }
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)
      option && myChart.setOption(option, true)

      const chartDom2 = document.getElementById('main2')
      const myChart2 = echarts.init(chartDom2)
      option && myChart2.setOption({ ...option, legend: { show: false }, title: { text: '' }}, true)
      this.lineFirst = true
    }
  }
}
</script>
